<template>
  <el-form
    :model="perForm"
    :rules="rules"
    ref="perForm"
    label-width="100px"
    class="demo-perForm"
  >
    <el-form-item label="权限名" prop="name">
      <el-input v-model="perForm.name"></el-input>
    </el-form-item>

    <el-form-item label="权限设置" prop="url">
      <el-input v-model="perForm.url"></el-input>
    </el-form-item>

    <el-form-item label="权限类型" prop="type">
      <el-radio-group v-model="perForm.type">
        <el-radio label="1">目录</el-radio>
        <el-radio label="2">权限</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="权限状态" prop="status">
      <el-radio-group v-model="perForm.status">
        <el-radio label="1">启用权限</el-radio>
        <el-radio label="2">禁用权限</el-radio>
      </el-radio-group>
    </el-form-item>


    <el-form-item label="Pid" prop="pid">
      <el-input v-model="perForm.pid"></el-input>
    </el-form-item>


    <el-form-item>
      <el-button type="primary" @click="submitForm('perForm')"
      >立即创建
      </el-button
      >
      <el-button @click="resetForm('perForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {

    mounted: function () {
      var app = this;
      //页面加载是默认调用的，
      //因为添加和修改共用一个页面，所以修改需要页面加载时回显
      var preId = this.$route.params.id;

      if (preId) {
        app.$httpRequest.get("Per/PreGetById/" + preId).then(function ({data}) {
          if (data.code == 0) {
            app.perForm = data.data;
            app.perForm.type=app.perForm.type+"";
            app.perForm.status=app.perForm.status+"";
          }
        });
      }
    },
    data() {
      return {
        perForm: {
          id: "", //更新用户需要id
          name: "删除权限",
          url: "httpss://localhost:8989/rbac-manager/Pre/PreDeleteByID",
          type: "1",
          status:"1",
          pid:"1"
        },
        rules: {
          name: [
            {required: true, message: "请输入用户名", trigger: "blur"},
            //   ,{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
          ],
          url: [
            {required: true, message: "输入权限设置", trigger: "blur"},
            //   ,{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
          ],
          type: [{required: true, message: "选择权限类型", trigger: "change"}],
        },
      };
    },
    methods: {
      submitForm(formName) {
        //添加
        var app = this;
        //判断 ，如果 preform 携带了id 那就是修改，否则就是新增
        var url="Per/PreSave";
        var btnmsg="添加";
        if(this.perForm.id){
          url="Per/PreUpdate";
          btnmsg="修改";
        }
        this.$httpRequest.post(url, this.perForm, {})
          .then(function ({data}) {
            if (data.code == 0) {
              //代表成功
              app.$message({
                message: btnmsg+"成功",
                type: "success",
                showClose: true,
                duration: 1000,
                //跳转到显示列表
                onClose: () => {
                  app.$router.push('/showPer');
                },
              });
            }else{
              //代表失败
              app.$message({
                message: btnmsg+"失败",
                type: "error",
                showClose: true,
                duration: 1000,
                //跳转到显示列表
                onClose: () => {
                  app.$router.push('/showPer');
                },
              });
            }
          })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
  };
</script>

<style>
</style>
